import { reqGetSchool } from "@/api/reqSchool"
import type { School } from "@/types/school"
import { onMounted, ref, watch, watchEffect } from "vue"

export const useShowSchool = () => {
  // change
  const changeRef = ref(Symbol())
  // 存储学校列表
  const schoolListRef = ref<School[]>([])
  //  学校总数
  const totalRef = ref(0)
  //  翻页的当前页
  const nowPageRef = ref(1)
  //  每页的大小
  const sizeRef = ref(5)
  // 获取学校列表
  const getSchoolByPage = async (page: number, size: number) => {
    const {
      status,
      data: { total, data },
    } = await reqGetSchool({ page, size })
    // const{status, data:data1} = await reqGetSchool({ page, size })
    // const {total, data} = data1
    if (status === 0) {
      schoolListRef.value = data
      totalRef.value = total
    }
  }

  // 执行 完成依赖收集 相关依赖发生变化，就会重新执行
  // watch([changeRef, totalRef], () => {
  //   getSchoolByPage(nowPageRef.value, sizeRef.value)
  // })
  watch([changeRef], () => {
    console.log("watch")
    getSchoolByPage(nowPageRef.value, sizeRef.value)
  })
  watchEffect(() => {
    console.log("watchEffect")
    getSchoolByPage(nowPageRef.value, sizeRef.value)
  })

  return {
    schoolListRef,
    sizeRef,
    nowPageRef,
    totalRef,
    changeRef,
    getSchoolByPage,
  }
}
